<template>
  <div>
		<div class="main-wrapper" :style="{'background-color': bgColor}">
			<div class="wave-wrapper" :style="{transform: 'scale(1,'+ per +')'}" v-for="i in 2">
				<div class="wave" v-for="j in 2">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 32"><path :fill="i == 1 ? colorBehind: colorFront" fill-opacity="1" d="M350,17.32V32H0V17.32C116.56,65.94,175-39.51,350,17.32Z"></path></svg>
				</div>
				<div class="water" :style="{'background-color': i == 1 ? colorBehind: colorFront}"></div>
			</div>
			<div class="nav-icon" v-bind:class="{ active: showMenu }" @click="showMenu = !showMenu">
			  <div></div>
			</div>
			<div class="menu-wrapper" :class="{active: showMenu}">
				<div class="menu">
					<div class="title" :style="{color:settingThemeColor}">设置</div>
					<div class="settings-wrapper">
						<!-- 通知 -->
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">通知</div>
							<div class="detail">
								<switcher v-model="alerting" :color="settingThemeColor"></switcher>
							</div>
						</div>
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">通知间隔(min)</div>
							<div class="detail fle-aic" :style="{color: settingThemeColor}">
								<input type="number" v-model.number="duration" @change="changeData('duration')"
									:style="{color: settingThemeColor,border:(typeof(duration) == 'number' ? 'none' : '1px solid #f56c6c')}"
									:disabled="alerting"
									>
							</div>
						</div>
						<!-- 通知 end -->
						<!-- 每日目标 -->
						<div class="div" :style="{'background-color': settingThemeColor}" style="width: 100%; height: 1px; margin: 10px 0"></div>
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">每日目标(ml)</div>
							<div class="detail fle-aic" :style="{color: settingThemeColor}">
								<input type="number" v-model.number="goal" @change="changeData('goal')"
									:style="{color: settingThemeColor,border:(typeof(goal) == 'number' ? 'none' : '1px solid #f56c6c')}"
									>
							</div>
						</div>
						<!-- 每日目标 end -->
						<!-- 杯子容量 -->
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">杯子容量(ml)</div>
							<div class="detail fle-aic" :style="{color: settingThemeColor}">
								<input type="number" v-model.number="cup" @change="changeData('cup')"
									:style="{color: settingThemeColor,border:(typeof(cup) == 'number' ? 'none' : '1px solid #f56c6c')}"
									>
							</div>
						</div>
						<!-- 杯子容量 end -->
						<!-- 主题定制 -->
						<div class="div" :style="{'background-color': settingThemeColor}" style="width: 100%; height: 1px; margin: 10px 0"></div>
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">主页背景</div>
							<div class="detail fle-aic" :style="{color: settingThemeColor}">
<!-- 								<input v-model="bgColor" @change="changeData('bgColor')"
									:style="{color: settingThemeColor}"> -->
									<verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false" :value="bgColor" @input="bgColor = $event" :showHistory="true" :colorHistory="['#2980b9','#33aa91','#51667d','#a463bf','#f2c511','#f4a630']"></verte>
							</div>
						</div>
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">波浪(前)</div>
							<div class="detail fle-aic" :style="{color: settingThemeColor}">
<!-- 								<input v-model="colorFront" @change="changeData('colorFront')"
									:style="{color: settingThemeColor}"> -->
									<verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false" :value="colorFront" @input="colorFront = $event" :showHistory="true" :colorHistory="['#2980b9','#33aa91','#51667d','#a463bf','#f2c511','#f4a630']"></verte>
							</div>
						</div>
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">波浪(后)</div>
							<div class="detail fle-aic" :style="{color: settingThemeColor}">
							<!-- 	<input v-model="colorBehind" @change="changeData('colorBehind')"
									:style="{color: settingThemeColor}"> -->
									<verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false" :value="colorBehind" @input="colorBehind = $event" :showHistory="true" :colorHistory="['#2980b9','#33aa91','#51667d','#a463bf','#f2c511','#f4a630']"></verte>
							</div>
						</div>
						<div class="set fle-jcsb">
							<div class="name" :style="{color: settingThemeColor}">设置主题色</div>
							<div class="detail fle-aic" :style="{color: settingThemeColor}">
			<!-- 					<input v-model="settingThemeColor" @change="changeData('settingThemeColor')"
									:style="{color: settingThemeColor}"> -->
									<verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false" :value="settingThemeColor" @input="settingThemeColor = $event" :showHistory="true" :colorHistory="['#2980b9','#33aa91','#51667d','#a463bf','#f2c511','#f4a630']"></verte>
							</div>
						</div>
						<!-- 主题定制 end -->
						<!-- 重置 -->
						<div class="reset" :style="{color: settingThemeColor}" @click="reset">
							重置
						</div>
						<!-- 重置 end -->
					</div>
				</div>
			</div>
			<template v-if="!showMenu">
				<div class="top-nums center">
					<div class="big">{{haveDrink}} 	<small>ml</small></div>
					<div class="small">每日目标：{{goal}}ml</div>
				</div>
				<div class="add-button center" @click="drink(1)">
					<svg t="1610007263873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2579" width="200" height="200"><path d="M853.333333 480H544V170.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v309.333333H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h309.333333V853.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V544H853.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" p-id="2580"></path></svg>
					<div class="text">{{cup}}ml</div>
				</div>
				<div class="small-button center minus" @click="drink(0)">
					<svg t="1610007248082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2435" width="200" height="200"><path d="M853.333333 544H170.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h682.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" p-id="2436"></path></svg>
				</div>				
				<div class="small-button center calendar">
					<svg t="1610007209685" class="icon" viewBox="0 0 1060 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2294" width="200" height="200"><path d="M514.90651816 857.19709059c190.77594415 0 345.42840472-154.65246056 345.42840472-345.42840395 0-190.77594415-154.65246056-345.42840472-345.42840472-345.42840472-190.77594415 0-345.42840472 154.65246056-345.42840394 345.42840472 0 190.77594415 154.65246056 345.42840472 345.42840394 345.42840395z m0 49.34691494c-218.03240444 0-394.7753189-176.74291523-394.77531889-394.77531889 0-218.03240444 176.74291523-394.7753189 394.77531888-394.77531967 218.02276625 0 394.7753189 176.74291523 394.77531968 394.77531967 0 218.03240444-176.74291523 394.7753189-394.77531968 394.77531889z m0 0" p-id="2295"></path><path d="M539.57997564 265.03411183c0-13.62822976-11.04522772-24.67345747-24.67345749-24.67345747s-24.67345747 11.04522772-24.67345746 24.67345748v265.23966771c0 7.10325697 3.05526773 13.86918208 8.38512095 18.55328307l148.04074411 129.53565197c10.24526759 8.99231893 25.84930221 7.97068362 34.84162114-2.26494656 8.99231893-10.24526759 7.97068362-25.84930221-2.26494656-34.84162036L539.57997564 519.07434319V265.03411183z m0 1e-8" p-id="2296"></path></svg>
				</div>				
			</template>

		</div>
  </div>
</template>

<script>
	import Switcher from '@/components/switcher'
	import Verte from 'verte';
  export default{
    components: {
			Switcher,Verte
    },
    data() {
      return {
				goal: 1500,
				cup: 300,
				haveDrink: 0,
				colorFront: '#32BAFA',
				colorBehind: '#2C7FBE',
				showMenu: false,
				bgColor: '#1e384c',
				duration: 60,
				alerting: false,
				settingThemeColor: '#1e384c',
				initFlag: false,
      }
    },
    methods: {
			drink(n){
				const cup = n ? this.cup : -this.cup
				this.haveDrink += cup
				this.haveDrink = this.haveDrink < 0 ? 0 : this.haveDrink
				this.haveDrink = this.haveDrink > this.goal ? this.goal : this.haveDrink 
				chrome.storage.sync.set({haveDrink: this.haveDrink});
				chrome.storage.sync.set({date: new Date().getTime()});
			},
			transTime(date){
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth()
				const day = date.getDate()
				return year + month + day
			},
			changeData(str){
				let obj = {}
				obj[str] = this[str]
				console.log(obj)
				chrome.storage.sync.set(obj);
			},
			reset(){
				
				this.goal = 1500
				this.cup = 300
				this.haveDrink = 0
				this.colorFront = '#32BAFA'
				this.colorBehind = '#2C7FBE'
				this.bgColor = '#1e384c'
				this.duration = 60
				this.alerting = false
				this.settingThemeColor = '#1e384c'
				
				let bg =  chrome.extension.getBackgroundPage()
				if(bg){
					bg.reset()
				}
				
			}
    },
    created() {
			chrome.storage.sync.get(null,res=>{
				console.log(res)
				this.goal = res.goal
				this.cup = res.cup
				this.duration = res.duration
				this.alerting = res.alerting
				this.colorFront = res.colorFront
				this.colorBehind = res.colorBehind
				this.bgColor = res.bgColor
				this.settingThemeColor = res.settingThemeColor
				let lastDate = res.date
				if(this.transTime(new Date().getTime()) == this.transTime(lastDate)){
					this.haveDrink = res.haveDrink
				}
				else{
					this.haveDrink = 0
					chrome.storage.sync.set({haveDrink: 0});
				}
				this.initFlag = true
			});
    },
    mounted() {

    },
		computed: {
			per() {
				return (this.haveDrink / this.goal).toFixed(2)
			}
		},
		watch: {
			alerting(newValue, oldValue) {
				if(this.initFlag){
					if(!this.duration){
						alert("间隔不可以为0")
						this.alerting = false
						return
					}
					let bg =  chrome.extension.getBackgroundPage()
					if(bg){
						bg.setAlert(newValue)
					}
					else{
						console.error(chrome.extension)
					}					
				}

			}
		},
  }
</script>

<style scoped lang="scss">
	.main-wrapper{
		width: 300px;
		height: 500px;
		overflow: hidden;
		position: relative;
		user-select: none;
		.wave-wrapper{
			width: 300px;
			height: 500px;
			position: absolute;
			transition: 1s all;
			bottom: 0;
			left: 0;
			transform-origin: 100% 100%;
			&>div{
				width: 300px;
				height: 100px;
				flex-shrink: 0;
				position: absolute;
				animation:wave 1s linear infinite;
				&:first-child{
					left: -300px;
				}
				svg{
					transform: scaleY(1.6);
				}
			}
			.water{
				position: absolute;
				bottom: 0;
				width: 300px;
				height: calc(100% - 34px);
				background-color: #32BAFA;
				animation:water 1s linear infinite;
			}
			&:first-child{
				&>div{
					animation-delay: .5s;
				}
				.water{
					background-color: #2C7FBE;
				}
			}
			@keyframes wave{
			    0% {
			        transform: translate3d(0,0,0);
			    }
			    50% {
			        transform: translate3d(50%,10px,0);
			    }
			    100% {
			        transform: translate3d(100%,0,0);
			    }
			}
			@keyframes water{
			    0% {
			    }
			    50% {
						transform: translate3d(0,10px,0);
			    }
			    100% {
			    }
			}
		}
		.nav-icon {
		  margin: 1em;
		  width: 40px;
		  height: 40px;
		  cursor: pointer;
			position: absolute;
			z-index: 5;
			right: 0;
			top: 0;
		  &:after, &:before, div {
		    background-color: white;
		    border-radius: 3px;
		    content: '';
		    display: block;
		    height: 5px;
		    width: 80%;
		    margin: 7px 0;
		    transition: all .2s ease-in-out;
		  }
		  &:before {
		    width: 100%;
		  }
		  &:after {
		    width: 60%;
		  }
		  &:hover {
		    &:after, &:before, div {
		      width: 100%;
		    }
		  }
		  &.active {
		    &:after {
		      background-color: #004d6e;
		      width: 100%;
		      transform: translateY(-12px) rotate(-135deg);
		    }
		    &:before {
		      background-color: #004d6e;
		      width: 100%;
		      transform: translateY(12px) rotate(135deg);
		    }
		    div {
		      transform: scale(0);
		    }
		  }
		}
		.menu-wrapper{
			position: absolute;
			border-radius: 50%;
			overflow: hidden;
			right: -30px;
			top: -30px;
			width: 0;
			height: 0;
			transition: 1s all;
			background-color: rgba(177, 211, 236,.9);
			&.active{
				right: -300px;
				top: -100px;
				width: 1000px;
				height: 1000px;
			}
			.menu{
				width: 300px;
				height: 500px;
				position: absolute;
				bottom: 400px;
				left: 400px;
				.title{
					color: #1e384c;
					font-size: 30px;
					margin: 28px;
				}
				.settings-wrapper{
					padding: 0 20px;
					.set{
						margin: 10px 0;
						input{
							width: 55px;
							margin-right: 5px;
							outline: none;
							border: none;
							background-color: rgba(177, 211, 236, .9);
						}
						.text{
							width: 28px;
						}
					}
				}
				.reset{
					position: absolute;
					bottom: 40px;
					text-decoration: underline;
					cursor: pointer;
				}
			}
		}
		.top-nums{
			color: white;
			flex-direction: column;
			position: absolute;
			top: 100px;
			left: 0;
			right: 0;
			margin: auto;
			.big{
				font-size: 50px;
			}
			.small{
				font-size: 14px;
				margin-top: 20px;
			}
		}
		.add-button{
			width: 60px;
			height: 60px;
			cursor: pointer;
			flex-direction: column;
			border-radius: 50%;
			position: absolute;
			top: 320px;
			background-color: white;
			left: 0;
			right: 0;
			margin: 0 auto;
			transition: .2s all;
			svg{
				transform: scale(.7);
			}
			.text{
				display: none;
			}
			&:hover{
				transform: scale(1.1,1.1);
				svg{
					display: none;
				}
				.text{
					display: block;
				}
			}
		}
		.small-button{
			width: 40px;
			height: 40px;
			cursor: pointer;
			flex-direction: column;
			border-radius: 50%;
			position: absolute;
			top: 380px;
			background-color: white;
			left: 50px;
			transition: .2s all;
			svg{
				transform: scale(.7);
			}
			&:hover{
				transform: scale(1.1,1.1);
			}
			&.calendar{
				right: 50px;
				left: auto;
			}
		}
	}
	/deep/ .verte__submit{
		display: none;
	}
</style>
<style>
</style>